<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-button @click="addForm">
        添加
      </el-button>
      <span style="float: right">拖拽调整顺序</span>
    </el-row>
    <el-row>
      <el-col :span="23">
        <el-table-draggable>
          <el-table
            id="resultTable"
            :data="ReturnColumns"
            :height="tableHeight"
            border
            size="mini"
            fit
            highlight-current-row
            row-key="AttributeName"
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="名称" prop="Name" />
            <el-table-column label="类型">
              <template slot-scope="scope">
                {{ scope.row.Type | dictFilter(enums.returnColumnTypeEnum) }}
              </template>
            </el-table-column>
            <el-table-column label="属性" prop="AttributeName" />
            <el-table-column label="字典" prop="DictCategoryName" />
            <el-table-column label="是否展示">
              <template slot-scope="scope">
                {{ scope.row.IsShow }}
              </template>
            </el-table-column>
            <el-table-column label="字体颜色">
              <template slot-scope="scope">
                {{ scope.row.FontColor }}
              </template>
            </el-table-column>
            <el-table-column label="空值">
              <template slot-scope="scope">
                {{ scope.row.EmptyValue }}
              </template>
            </el-table-column>
            <el-table-column label="是否跳转">
              <template slot-scope="scope">
                {{ scope.row.IsJump }}
              </template>
            </el-table-column>
            <el-table-column label="跳转目标" prop="JumpTarget" />

            <el-table-column>
              <template slot-scope="scope">
                <el-button type="text" @click="editForm(scope.row)">
                  修改
                </el-button>
                <el-button type="text" @click="removeForm(scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-table-draggable>
        <el-row style="margin-top: 15px">
          <el-button type="primary" @click="save">
            保存
          </el-button>
          <el-button @click="close">
            取消
          </el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="editFormDialog.show" :close-on-click-modal="false">
      <el-form ref="editFormDialog" :model="editFormDialog" label-width="150px">
        <el-form-item label="名称" prop="Name" :rules="[{required: true, message: '请输入'}]">
          <el-input v-model="editFormDialog.Name" />
        </el-form-item>
        <el-form-item label="属性" prop="AttributeName" :rules="[{required: true, message: '请输入'}]">
          <el-input v-model="editFormDialog.AttributeName" />
        </el-form-item>
        <el-form-item label="类型" prop="Type" :rules="[{required: true, message: '请输入'}]">
          <el-select v-model="editFormDialog.Type">
            <el-option
              v-for="item in enums.returnColumnTypeEnum"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否展示" prop="IsShow" :rules="[{required: true, message: '请输入'}]">
          <el-switch v-model="editFormDialog.IsShow" />
        </el-form-item>
        <el-form-item label="字典类型" prop="DictCategoryId">
          <el-select v-model="editFormDialog.DictCategoryId" placeholder="请选择" filterable clearable>
            <el-option
              v-for="item in dictCategoryList"
              :key="item.DictionaryCategoryId"
              :label="item.CategoryName"
              :value="item.DictionaryCategoryId"
            >
              <span style="float: left">{{ item.CategoryName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.CategoryCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否跳转" prop="IsJump" :rules="[{required: true, message: '请输入'}]">
          <el-switch v-model="editFormDialog.IsJump" />
        </el-form-item>
        <el-form-item v-show="editFormDialog.IsJump" label="跳转类型" prop="JumpType">
          <el-select v-model="editFormDialog.JumpType">
            <el-option v-for="item in enums.reportJumpTypeEnum" :key="item.value" :value="item.value" :label="item.text" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="editFormDialog.IsJump" label="跳转方式" prop="JumpMode">
          <el-select v-model="editFormDialog.JumpMode">
            <el-option v-for="item in enums.reportJumpModeEnum" :key="item.value" :value="item.value" :label="item.text" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="editFormDialog.IsJump" label="跳转目标" prop="JumpTarget">
          <el-input v-model="editFormDialog.JumpTarget" />
        </el-form-item>
        <el-form-item v-show="editFormDialog.IsJump" label="跳转参数">
          <el-row>
            <el-row>
              <el-select v-model="addParam.ParamType" style="width: 200px" placeholder="参数类型">
                <el-option v-for="item in enums.reportJumpParamTypeEnum" :key="item.value" :value="item.value" :label="item.text" />
              </el-select>
              <el-input v-model="addParam.Name" style="width: 200px" placeholder="参数名称" />
              <el-input v-model="addParam.Value" style="width: 200px" placeholder="参数值" />
              <el-button @click="doAddParam">
                添加
              </el-button>
            </el-row>

            <el-table :data="editFormDialog.JumpParams">
              <el-table-column label="参数类型">
                <template slot-scope="scope">
                  {{ scope.row.ParamType | dictFilter(enums.reportJumpParamTypeEnum) }}
                </template>
              </el-table-column>
              <el-table-column label="参数名称" prop="Name" />
              <el-table-column label="参数值" prop="Value" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="removeParam(scope.row.$index)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-form-item>
        <el-form-item label="颜色" prop="FontColor">
          <el-color-picker v-model="editFormDialog.FontColor" />
        </el-form-item>
        <el-form-item label="空值" prop="EmptyValue">
          <el-input v-model="editFormDialog.EmptyValue" />
        </el-form-item>
        <el-form-item label="空值颜色" prop="EmptyValueFontColor">
          <el-color-picker v-model="editFormDialog.EmptyValueFontColor" />
        </el-form-item>
        <el-form-item label="额外配置" prop="ExtraConfig">
          <el-input v-model="editFormDialog.ExtraConfig" type="textarea" />
          <el-collapse>
            <el-collapse-item title="常用配置" name="1">
              <p>
                {
                "default": {
                "value": "发起审核失败",
                "color": "#ff0000"
                },
                "normal": {
                "color": "#ff0000"
                }
                }
              </p>
              <p>default: 空值情况</p>
              <p>default.value: 默认值</p>
              <p>default.value: 默认值的颜色</p>
              <p>normal:一般情况</p>
              <p>normal.color:一般情况的颜色</p>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveForm">
            保存
          </el-button>
          <el-button @click="editFormDialog.show = false">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import reportApi from '@/api/report'
import commonValidator from '@/utils/commonValidator'
import reportFormTypeEnum from '@/enums/report/reportFormTypeEnum'
import returnColumnTypeEnum from '@/enums/report/returnColumnTypeEnum'
import apolloClient from '@/utils/graphql'
import gql from 'graphql-tag'
import reportJumpTypeEnum from '@/enums/report/reportJumpType'
import reportJumpParamTypeEnum from '@/enums/report/reportJumpParamType'
import ElTableDraggable from 'element-ui-el-table-draggable'
import reportJumpModeEnum from '@/enums/report/reportJumpMode'
export default {
  name: 'ReportResultInfo',
  components: {
    ElTableDraggable
  },
  props: {
    // id
    id: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      // 表单数据
      ReturnColumns: [],
      enums: {
        reportFormTypeEnum,
        returnColumnTypeEnum,
        reportJumpTypeEnum,
        reportJumpParamTypeEnum,
        reportJumpModeEnum
      },
      addParam: {
        ParamType: null,
        Name: null,
        Value: null
      },
      editFormDialog: {
        show: false,
        Name: null,
        AttributeName: null,
        DictCategoryId: null,
        IsShow: false,
        ExtraConfig: null,
        item: null,
        EmptyValueFontColor: null,
        EmptyValue: null,
        FontColor: null,
        IsJump: false,
        JumpType: null,
        JumpMode: null,
        JumpTarget: null,
        JumpParams: [],
        Type: null
      },
      commonValidator,
      dictCategoryList: []
    }
  },
  computed: {
    tableHeight() {
      return document.body.clientHeight - 200
    }
  },
  created() {

  },
  mounted() {
    this.getDetail()
    this.getDictCategoryList()
  },
  methods: {

    doAddParam() {
      var data = {}
      data.ParamType = this.addParam.ParamType
      data.Value = this.addParam.Value
      data.Name = this.addParam.Name
      this.editFormDialog.JumpParams.push(data)
      this.clearAddParam()
    },
    removeParam(i) {
      this.editFormDialog.JumpParams.splice(i, 1)
    },
    up(i) {
      var t = this.ReturnColumns.splice(i, 1)
      this.ReturnColumns.splice(i - 1, 0, t[0])
    },
    down(i) {
      var t = this.ReturnColumns.splice(i, 1)
      this.ReturnColumns.splice(i + 1, 0, t[0])
    },
    // 获取字典类型列表
    getDictCategoryList() {
      apolloClient.query({
        fetchPolicy: 'network-only',
        query: gql`query {
                    dictCategoryList{
                        DictionaryCategoryId
                        CategoryName
                        CategoryCode
                    }
                 }`,
        variables: {}
      }).then(response => {
        if (response.data) {
          this.dictCategoryList = response.data.dictCategoryList
        }
      })
    },
    saveForm() {
      var that = this
      this.$refs.editFormDialog.validate((valid) => {
        if (valid) {
          if (that.editFormDialog.item) {
            that.editFormDialog.item.Type = that.editFormDialog.Type
            that.editFormDialog.item.Name = that.editFormDialog.Name
            that.editFormDialog.item.AttributeName = that.editFormDialog.AttributeName
            that.editFormDialog.item.DictCategoryId = that.editFormDialog.DictCategoryId
            that.editFormDialog.item.DictCategoryName = that.getCategoryNameById(that.editFormDialog.item.DictCategoryId)
            that.editFormDialog.item.ExtraConfig = that.editFormDialog.ExtraConfig
            that.editFormDialog.item.IsShow = that.editFormDialog.IsShow
            that.editFormDialog.item.EmptyValueFontColor = that.editFormDialog.EmptyValueFontColor
            that.editFormDialog.item.EmptyValue = that.editFormDialog.EmptyValue
            that.editFormDialog.item.FontColor = that.editFormDialog.FontColor
            that.editFormDialog.item.IsJump = that.editFormDialog.IsJump
            that.editFormDialog.item.JumpType = that.editFormDialog.JumpType
            that.editFormDialog.item.JumpMode = that.editFormDialog.JumpMode
            that.editFormDialog.item.JumpTarget = that.editFormDialog.JumpTarget
            that.editFormDialog.item.JumpParams = that.editFormDialog.JumpParams
          } else {
            var item = {}
            item.Type = that.editFormDialog.Type
            item.Name = that.editFormDialog.Name
            item.AttributeName = that.editFormDialog.AttributeName
            item.DictCategoryId = that.editFormDialog.DictCategoryId
            item.DictCategoryName = that.getCategoryNameById(item.DictCategoryId)
            item.ExtraConfig = that.editFormDialog.ExtraConfig
            item.IsShow = that.editFormDialog.IsShow
            item.EmptyValueFontColor = that.editFormDialog.EmptyValueFontColor
            item.EmptyValue = that.editFormDialog.EmptyValue
            item.FontColor = that.editFormDialog.FontColor
            item.IsJump = that.editFormDialog.IsJump
            item.JumpType = that.editFormDialog.JumpType
            item.JumpMode = that.editFormDialog.JumpMode
            item.JumpTarget = that.editFormDialog.JumpTarget
            item.JumpParams = that.editFormDialog.JumpParams

            that.ReturnColumns.push(item)
          }
          that.editFormDialog.show = false
        }
      })
    },
    getCategoryNameById(dictCategoryId) {
      for (const dictCategory of this.dictCategoryList) {
        if (dictCategoryId === dictCategory.DictionaryCategoryId) {
          return dictCategory.CategoryName
        }
      }
      return ''
    },
    clearAddParam() {
      this.addParam.ParamType = null
      this.addParam.Value = null
      this.addParam.Name = null
    },
    addForm() {
      this.editFormDialog.Type = null
      this.editFormDialog.AttributeName = null
      this.editFormDialog.Name = null
      this.editFormDialog.item = null
      this.editFormDialog.DictCategoryId = null
      this.editFormDialog.ExtraConfig = null
      this.editFormDialog.IsShow = false
      this.editFormDialog.show = true
      this.editFormDialog.EmptyValueFontColor = null
      this.editFormDialog.EmptyValue = null
      this.editFormDialog.FontColor = null
      this.editFormDialog.IsJump = false
      this.editFormDialog.JumpType = null
      this.editFormDialog.JumpMode = null
      this.editFormDialog.JumpTarget = null
      this.editFormDialog.JumpParams = []
      this.clearAddParam()
    },
    editForm(row) {
      this.editFormDialog.Type = row.Type
      this.editFormDialog.AttributeName = row.AttributeName
      this.editFormDialog.Name = row.Name
      this.editFormDialog.DictCategoryId = row.DictCategoryId
      this.editFormDialog.ExtraConfig = row.ExtraConfig
      this.editFormDialog.IsShow = row.IsShow
      this.editFormDialog.item = row
      this.editFormDialog.EmptyValueFontColor = row.EmptyValueFontColor
      this.editFormDialog.EmptyValue = row.EmptyValue
      this.editFormDialog.FontColor = row.FontColor
      this.editFormDialog.IsJump = row.IsJump || false
      this.editFormDialog.JumpType = row.JumpType
      this.editFormDialog.JumpMode = row.JumpMode
      this.editFormDialog.JumpTarget = row.JumpTarget
      this.editFormDialog.JumpParams = row.JumpParams || []

      this.clearAddParam()

      this.editFormDialog.show = true
    },
    removeForm(index) {
      this.ReturnColumns.splice(index, 1)
    },
    getDetail() {
      reportApi.getReportFormList(this.id).then(response => {
        if (response.data) {
          this.ReturnColumns = response.data.reportDetail.ReportResultColumns || []
        } else {
          this.$notify.error(response.errors[0].message)
        }
      }).catch((err) => {
        this.$notify.error(err.message)
      })
    },
    cleanJumpParams(jumpParams) {
      if (!jumpParams) {
        return jumpParams
      }
      var rs = []
      for (const jumpParam of jumpParams) {
        jumpParam.__typename = undefined
        rs.push(jumpParam)
      }
      return rs
    },
    // 保存数据
    save() {
      var postData = {}
      postData.ReportId = this.id
      postData.Items = []
      for (const returnColumn of this.ReturnColumns) {
        var item = {}
        item.Name = returnColumn.Name
        item.AttributeName = returnColumn.AttributeName
        item.Type = returnColumn.Type
        item.DictCategoryId = returnColumn.DictCategoryId
        item.ExtraConfig = returnColumn.ExtraConfig
        item.IsShow = returnColumn.IsShow
        item.FontColor = returnColumn.FontColor
        item.EmptyValue = returnColumn.EmptyValue
        item.EmptyValueFontColor = returnColumn.EmptyValueFontColor
        item.IsJump = returnColumn.IsJump
        item.JumpType = returnColumn.JumpType
        item.JumpMode = returnColumn.JumpMode
        item.JumpTarget = returnColumn.JumpTarget
        item.JumpParams = this.cleanJumpParams(returnColumn.JumpParams)

        postData.Items.push(item)
      }
      reportApi.updateReportResultColumn(postData).then(response => {
        console.log(response)
        if (response.data.updateReportResultColumns) {
          this.$notify.success('保存成功')
          this.close()
        } else {
          this.$notify.error(response.errors[0].message)
        }
      }).catch((err) => {
        this.$notify.error(err.message)
      })
    },
    close() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.sortable-ghost{
    opacity: 0.4;
    background-color: #f4e2c9;
}
</style>
